<template>
  <div>
    <div class="label">
      <div class="stand">
        {{
          listData.songCount == 0
            ? "没有搜索到任何结果"
            : `找到${listData.songCount}首单曲`
        }}
      </div>
    </div>
    <div class="result_content">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="单曲" name="first">
          <span>音乐标题</span><span>歌手</span><span>专辑</span>
          <li
            @click="play(item.id)"
            v-for="(item, key) in listData.songs"
            :key="key"
          >
            <div>{{ item.name }}</div>
            <div>{{ item.artists[0].name }}</div>
            <div>{{ item.album.name }}</div>
          </li>
          <el-pagination background layout="prev, pager, next" :total="50" style="margin: 0 auto;">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="歌手" name="second"></el-tab-pane>
        <el-tab-pane label="专辑" name="third"></el-tab-pane>
        <el-tab-pane label="视频" name="fourth"></el-tab-pane>
        <el-tab-pane label="歌单" name="five"></el-tab-pane>
        <el-tab-pane label="歌词" name="six"></el-tab-pane>
        <el-tab-pane label="主播电台" name="seven"></el-tab-pane>
        <el-tab-pane label="用户" name="eight"></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted, ref, toRefs } from "vue";
import get from "@/utils/axios/index";
export default {
  name: "PlayMusiclists",
  props: ["listData"],
  data() {
    return {
      activeName: "first",
    };
  },
  setup(props, context) {
    const state = reactive({
      val: "",
    });
    const play = (val) => {
      get(`/song/url?id=${val}`).then((res) => {
        console.log(res);
        context.emit("geturl", res.data[0].url);
      });
    };
    return {
      play,
    };
  },
  mounted: function () {},
};
</script>
<style lang='scss' scoped>
.label {
  display: inline-block;
  width: 100%;
  .stand {
    line-height: 40px;
    float: left;
    margin: 10px;
    font-size: 20px;
    font-weight: bolder;
  }
}
.result_content {
  padding: 0 20px;
  text-align: left;
  li {
    list-style: none;
    width: 100%;
    text-align: left;
    height: 30px;

    div {
      width: 20%;
      text-align: left;
      display: inline-block;
      white-space:nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  li:nth-child(2n) {
    background: #f6f6f7;
  }
  span {
    display: inline-block;
    width: 20%;
    padding: 5px 0;
    opacity: 0.4;
  }
}
//  elementui 样式修改
/deep/ .el-tabs__item.is-active {
  color: #ec4141;
}
/deep/ .el-tabs__item:hover {
  color: #ec4141;
}
/deep/ .el-tabs__active-bar {
  background-color: #ec4141;
}
</style>
